{% load static %}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        
        <meta name="robots" content="noindex,nofollow" />
        
        <title>{% block title %}Department Sales Report | Online Retail POS{% endblock %} </title>

        <!-- Custom fonts for this template-->
        <link href="{% static 'vendor/fontawesome-free/css/all.min.css' %}" rel="stylesheet" type="text/css">
        <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">

        <!-- Custom styles for this template-->
        <link href="{% static 'css/sb-admin-2.min.css' %}" rel="stylesheet">
        <link href="{% static 'vendor/datatables/dataTables.bootstrap4.min.css' %}" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/dt-1.12.1/datatables.min.css"/>
        <script type="text/javascript" src="https://cdn.datatables.net/v/bs4/dt-1.12.1/datatables.min.js"></script>
    
    </head>
    <body >
        <div class="row" >
                <div class="card-header border-success pt-3 pb-3 pr-5 pl-5" style="width:100%">
                    <div class="row  pr-5 pl-5 pt-2" > 
                        <div class="col-lg-6">{% now " M d, Y \- h:i A" %} </div>
                        <div class="col-lg-6 text-right">{{store_name}}</div>
                    </div>
                    
                    <div class="font-weight-bold text-success h3 text-center"> Department Sales Report </div>
                    <div class="text-dark text-center">    
                        {{ start_date }} - {{ end_date }} <br><br> 
                    </div> 
                </div>
                <div class="card-body" style="padding-bottom:130px;width:100%">
                    <div class="table-responsive pl-3 pr-3 pt-1" style="text-align:center">
                    {{ table_html|safe }}
                    </div>
                </div>
        </div>

            <!-- Bootstrap core JavaScript-->
        <script src="{% static 'vendor/jquery/jquery.min.js' %}"></script>
        <script src="{% static 'vendor/bootstrap/js/bootstrap.bundle.min.js' %}"></script>

        <!-- Core plugin JavaScript-->
        <script src="{% static 'vendor/jquery-easing/jquery.easing.min.js' %}"></script>

        <!-- Custom scripts for all pages-->
        <script src="{% static 'js/sb-admin-2.min.js' %}"></script>

        <!-- Data Table  plugins -->
        <script src="{% static 'vendor/datatables/jquery.dataTables.min.js' %}"></script>
        <script src="{% static 'vendor/datatables/dataTables.bootstrap4.min.js' %}"></script>

        <!-- Page level custom scripts -->
        <script src="{% static 'js/demo/datatables-demo.js' %}"></script>
        
    </body>
</html>